<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {margin:0px; padding:0px;}
#div1 {width:100px; height:100px;position:absolute; background-color:#09F; left:200px; top:300px; opacity:0.5; filter:alpha(opacity:50);}
#btnDiv {position: absolute; left:310px; width:600px;}
#endline {width:300px;top:400px; position:absolute; border:1px solid #333;}
#rightEndLine {height:400px; left:300px; position:absolute; border:1px solid #333;}
</style>
<script type="text/javascript" src="perfectMove.js"></script>
<script type="text/javascript">
window.onload = function(){
	var oDiv = document.getElementById('div1');
	//oDiv.style.top = '0px';
	//oDiv.style.left = '0px';
	oDiv.computedHeight = getStyleIntValue(oDiv,'height');
	var oUniformMoveBtn = document.getElementById('uniformMoveBtn');
	oUniformMoveBtn.onclick = function(){
		oDiv.params = {
			iTimeSpan: 10
		};
		oDiv.attrs = {
			top: {
				speedType: 'uniform',
				iTargetValue: 0,
				iSpeed: 15
			},
			left: {
				speedType: 'uniform',
				iTargetValue: 0,
				iSpeed: 10
			},
			opacity:{
				speedType: 	'uniform',
				iTargetValue: 100,
				iSpeed: 5
			}
		};
		startMove(oDiv, 30);
	}
	var oBufferedMoveBtn = document.getElementById('bufferedMoveBtn');
	oBufferedMoveBtn.onclick = function(){
		oDiv.params = {
			iTimeSpan: 10
		};
		oDiv.attrs = {
			top: {
				speedType: 'buffered',
				iTargetValue:0
			},
			left: {
				speedType: 'buffered',
				iTargetValue: 0	
			},
			opacity:{
				speedType: 'buffered',
				iTargetValue: 100	
			}
		};
		startMove(oDiv, 30);
	};
	var oElasticMoveBtn = document.getElementById('elasticMoveBtn');
	oElasticMoveBtn.onclick = function(){
		oDiv.params = {
			iTimeSpan: 10
		};
		oDiv.attrs = {
			top: {
				speedType: 'elastic',
				iTargetValue: 0,
				iSpeed: 0,
				fFrictionFactor: 0.8
			},
			left: {
				speedType: 'elastic',
				iTargetValue: 0,
				iSpeed: 0,
				fFrictionFactor: 0.8
			},
			opacity: {
				speedType: 'elastic',
				iTargetValue: 100,
				iSpeed: 0,
				fFrictionFactor: 0.8
			}
		};
		startMove(oDiv, 30);
	};
	var oAccelerateReboundMoveBtn = document.getElementById('acceleratedReboundBtn');
	oAccelerateReboundMoveBtn.onclick = function(){
		oDiv.params = {
			iTimeSpan: 10
		};
		oDiv.attrs = {
			top: {
				speedType: 'acceleratedRebound',
				iTargetValue: 0,
				iSpeed: 0,
				//bOriginPosFlag: true,
				iAcceleration: -7,
				fReboundFactor: 0.7
			},
			opacity:{
				speedType: 'acceleratedRebound',
				iTargetValue: 100,
				iSpeed: 0,
				//bOriginPosFlag: false,
				iAcceleration: 3,
				fReboundFactor: 0.7
			},
			left: {
				/*speedType: 'acceleratedRebound',*/
				iTargetValue: 0,
				/*iSpeed: 0,
				bOriginPosFlag: true,
				iAcceleration:3,
				fReboundFactor: 0.5
				*/
				dependentMoveFunc: function(){
					var aObjArr = arguments[0];
					var attr = arguments[1];
					var currentIndex = arguments[2];
					var currentObj = aObjArr[currentIndex];
					var iTopCurrentValue = getStyleIntValue(currentObj, 'top');
					var iTopOriginValue = 300;
					var iLeftOriginValue = 200;
					var iLeftCurrentValue = Math.round(iTopCurrentValue/iTopOriginValue*iLeftOriginValue);
					setStyle(currentObj, 'left', iLeftCurrentValue);
				}
			}
		};
		startMove(oDiv, 30);
	};
	var oResetBtn = document.getElementById('resetBtn');
	oResetBtn.onclick = function(){
		clearInterval(oDiv.timer);
		setStyle(oDiv, 'top', 300);
		setStyle(oDiv, 'left', 200);
		setStyle(oDiv, 'opacity', 50);
	};
}

</script>
<title>无标题文档</title>
</head>
<div id="div1">
</div>
<div id="btnDiv">
	<input type="button" id="uniformMoveBtn" value="匀速运动" />
    <input type="button" id="bufferedMoveBtn" value="缓冲运动" />
    <input type="button" id="elasticMoveBtn" value="弹性运动"/>
    <input type="button" id="acceleratedReboundBtn" value="加速度&反弹运动"/>
    <input type="button" id="resetBtn" value="复位"/>
</div>
<div id="endline"></div>
<div id="rightEndLine"></div>
<body>
</body>
</html>
